<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
    
    <style>
        /* 209000632 许丹丹 */
        li {
            list-style: none;
        }
        
        .center {
            margin: 0 auto;
            width: 400px;
            text-align: center;
        }
        
        .red {
            color: red;
        }
        
        .green {
            color: green;
        }
        .content{
            border:1px #000 solid;
        }
        .my-enter-from,my-leave-to{
            opacity: 0;
            transform: translate(50px);
        }
    
        .my-move,.my-enter-active,.my-leave-active{
            transition: all 1s ease 0s;
        }
       .my-leave-active{
        position: absolute;
       }
       
   
    </style>
</head>

<body>
    <div id="app"></div>
    <template id="root">
    <div class="center">
      
        <my-form></my-form>
     
     
    </div>
  </template>

    <template id="form">
        <transition name="my">
            <div class="content" v-if="isShow">
                <h3>登录</h3>
                <ul>
                  <li>
                    <label>用户名:</label><input type="text" @blur="checkUserName" v-model="username" placeholder="请输入用户名">
                    <span :class="[this.errors.username=='校验通过'?'green':'red']">{{errors.username}}</span>
                  </li>
                  <li>
                    <label>密码:</label><input type="password" @blur="checkPass" v-model=" password" placeholder="请输入密码">
                    <span>{{errors.password}}</span>
                  </li>
                </ul>
              
                <button @click="handleRegister">登录</button><br>
              </div>
            </transition>
            <button @click="isShow = !isShow">显示</button>
  </template>

    
</body>

<script>
    const emitter = window.mitt()
    const app = Vue.createApp({
        template: "#root",
    })

    app.component('MyForm', {
        template: '#form',
        data() {
            return {
                isShow: false,
                username: '',
                password: '',
                errors: {},
                id: '',
               
            }
        },
        methods: {
            handleRegister() {
                if (this.errors.username == '校验通过' && this.errors.password == '校验通过') {

                    this.users.push({
                        username: this.username,
                        password: this.password,
                        gender: this.gender,
                        city: this.selectedCity
                    })
                    console.log(this.users)
                    emitter.emit('userlist', this.users)

                }
            },
            checkUserName() {
                if (this.username == "" || this.username == null) {
                    this.errors.username = "用户名不能为空"
                } else {
                    this.errors.username = "校验通过"
                }
            },
            checkPass() {
                if (this.password == "" || this.password == null) {
                    this.errors.password = "密码不能为空"
                } else {
                    if (this.password.length < 6) {
                        this.errors.password = "密码长度不正确"

                    } else {
                        this.errors.password = "校验通过"

                    }
                }
            },

        }

    })


    app.mount("#app")
</script>

</html>
